<!--
 * Copyright © 2022
 * @Author: zhangxiang
 * @Date: 2022-08-08 14:40:47
 * @LastEditors: zhangxiang
 * @LastEditTime: 2023-05-11 17:38:07
 * @Description:
 *
-->

<template>
  <div class="audit-logs-container">
    <el-row class="header" type="flex" align="middle">
      <span class="name">用户</span>
      <el-select
        v-model="userName"
        placeholder="请选择用户"
        size="medium"
        :disabled="true"
        style="width: 200px; margin-left: 10px; margin-right: 20px"
      >
        <el-option
          v-for="item in userOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <span class="name">操作</span>
      <el-select
        v-model="operationType"
        placeholder="请选择用户行为操作"
        size="medium"
        style="width: 200px; margin-left: 10px; margin-right: 20px"
      >
        <el-option
          v-for="item in operationOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-button
        size="medium"
        type="primary"
        @click="queryClick"
      >查询</el-button>
      <el-button size="medium" @click="resetClick">重置</el-button>
    </el-row>
    <div id="audit-main" class="main">
      <template v-if="list.length > 0">
        <div class="list">
          <div v-for="(item, index) in list" :key="index" class="day-log">
            <div class="date">
              <div
                class="line"
                :style="{ background: getLineBgColor(index) }"
              ></div>
              <div v-if="item.today" class="today">今天</div>
              <div :class="['dateTime', item.today ? 'special' : '']">
                {{ item.dateTime }}
              </div>
            </div>
            <div class="logs">
              <div v-for="(log, lindex) in item.logs" :key="lindex" class="log">
                <div class="createTime">{{ log.createTime }}</div>
                <div class="dot"></div>
                <div v-if="lindex > 0" class="dot-line"></div>
                <div class="message">{{ log.message }}</div>
              </div>
            </div>
          </div>
        </div>
        <el-row type="flex" justify="end" style="margin-top: 20px">
          <el-pagination
            background
            layout="total, sizes, prev, pager, next"
            :page-sizes="[10, 15, 20]"
            :page-size="pageSize"
            :current-page.sync="pageNum"
            :total="totalSize"
            @current-change="changePage"
            @size-change="sizeChange"
          />
        </el-row>
      </template>
      <div v-else class="list-none">暂无数据</div>
    </div>
  </div>
</template>

<script>
import { getLogList } from '@/api/cnap/statis-analysis'
import { AUDIT_OPERATION_TYPE } from '@/utils/cnap/constant'
import { parseTime } from '@/utils/utils'
import { Loading } from 'element-ui'

export default {
  name: 'AuditLogs',
  components: {
  },
  data() {
    return {
      operationOptions: AUDIT_OPERATION_TYPE, // 操作选项
      userName: this.$store.getters.userName, // 用户名
      operationType: '', // 操作类型
      pageSize: 10, // 页size
      pageNum: 1, // 页码
      totalSize: 0, // 总数
      list: [], // 列表
      loadingInstance: null // loading
    }
  },
  computed: {
    /**
     * @description: 用户选项
     * @return {*}
     */
    userOptions() {
      return [
        {
          label: this.$store.getters.userName,
          value: this.$store.getters.userName
        }
      ]
    }
  },
  mounted() {
    this.initPageData() // 初始化数据
  },
  methods: {
    /**
     * @description: 获取边界线颜色
     * @param {*} index
     * @return {*}
     */
    getLineBgColor(index) {
      const colors = ['#0091FF', '#32C5FF', '#00E8D3', '#6DD400'] // 颜色数组
      return colors[index % 4] // 循环颜色
    },
    /**
     * @description: size变化
     * @param {*} size
     * @return {*}
     */
    sizeChange(size) {
      this.pageSize = size
      this.pageNum = 1 // 第一页
      this.getAuditLogs() // 请求数据
    },
    /**
     * @description: 切换页码
     * @param {*} pageNum
     * @return {*}
     */
    changePage(pageNum) {
      this.pageNum = pageNum
      this.getAuditLogs() // 请求数据
    },
    /**
     * @description: 重置
     * @return {*}
     */
    resetClick() {
      this.operationType = ''
      this.pageNum = 1 // 第一页
      this.getAuditLogs() // 请求数据
    },
    /**
     * @description: 查询
     * @return {*}
     */
    queryClick() {
      this.pageNum = 1 // 第一页
      this.getAuditLogs() // 请求数据
    },
    /**
     * @description: 获取审计日志
     * @return {*}
     */
    getAuditLogs() {
      // 请求
      // 审计接口
      getLogList({
        userName: this.userName, // 用户名
        operationType: this.operationType, // 操作类型
        pageNum: this.pageNum, // 页码
        pageSize: this.pageSize // 页size
      })
        .then((res) => {
          if (res.data) {
            this.totalSize = res.data.totalSize
            const list = Array.isArray(res.data.data) ? res.data.data : []
            const now = parseTime(Date.now(), '{y}-{m}-{d}') // 时间格式
            this.list = list.map((element) => {
              element.today = element.dateTime === now // 是否是今天判断
              return element
            })
          } else {
            // 数据为空处理
            this.totalSize = 0
            this.list = []
          }
        })
        .finally(() => {
          this.loadingInstance.close() // 取消loading
        })
    },
    /**
     * @description: 初始化数据
     * @return {*}
     */
    initPageData() {
      // 展示loading
      this.loadingInstance = Loading.service({
        target: '#audit-main',
        fullscreen: false,
        text: '加载中...'
      })
      this.pageNum = 1 // 第一页
      this.getAuditLogs() // 请求数据
    }
  }
}
</script>

<style lang="less" scoped>
@import "@/assets/css/common.less";
.audit-logs-container {
  .header {
    margin-bottom: 20px;

    .name {
      .textStyle(14px , 400, #4a4a4a);
      line-height: 20px;
    }
  }

  .main {
    .day-log {
      background: #fdfdfd;
      border: 1px solid #ececec;
      margin-bottom: 20px;
      position: relative;

      .date {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 253px;
        background: #f8f8f8;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .line {
          position: absolute;
          left: 0;
          top: 0;
          bottom: 0;
          width: 5px;
          background: #0091ff;
        }

        .today {
          .textStyle(24px , 600, #4a4a4a);
          line-height: 33px;
          margin-bottom: 2px;
        }
        .dateTime {
          .textStyle(16px , 600, #4a4a4a);
          line-height: 22px;
          &.special {
            .textStyle(14px , 400, #C3C3C3);
            line-height: 20px;
          }
        }
      }

      .logs {
        box-sizing: border-box;
        padding: 20px 25px 20px 280px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-height: 80px;

        .log {
          display: flex;
          align-items: center;
          margin-bottom: 20px;
          position: relative;
          &:last-child {
            margin-bottom: 0;
          }
          .createTime {
            width: 40px;
            .textStyle(14px , 400, #696969);
            line-height: 20px;
          }
          .dot {
            width: 5px;
            height: 5px;
            border-radius: 50%;
            margin: 0 20px;
            background: #d8d8d8;
          }
          .dot-line {
            position: absolute;
            left: 62px;
            bottom: 10px;
            height: 37px;
            border-left: 1px dashed #d8d8d8;
          }
          .message {
            .textStyle(14px , 400, #696969);
            line-height: 20px;
          }
        }
      }
    }

    .list-none {
      height: 200px;
      line-height: 200px;
      text-align: center;
    }
  }
}
</style>
